<template>
	<view>
		<view class="card-content">
			<view class="card-head">提现方式</view>
			<view class="card-body">
				<view class="selectBox" @click="selectType">
					<view>{{label}}</view>
					<text class="iconfont iconarrow-right1"></text>
				</view>
			</view>
		</view>
		<view class="card-content">
			<view class="card-head">提现金额</view>
			<view class="card-body">
				<view class="take-cash">
					<view class="top">
						<input v-model="input" placeholder="请输入提现金额" placeholder-class="placeholderClass">
						<view class="button" @click="allInput">全部提现</view>
					</view>
					<view class="withdrawAccount">可提现金额：¥{{withdrawAccount}}</view>
				</view>

			</view>
		</view>
		<view class="card-content">
			<view class="card-head">收款账户信息</view>
			<view class="card-body">
				<view class="body-list">
					<view class="list-name">收款账户</view>
					<view class="list-value">{{userInfo.bankName}}</view>
				</view>
				<view class="body-list">
					<view class="list-name">收款账号</view>
					<view class="list-value">{{userInfo.bankNo}}</view>
				</view>
				<view class="body-list">
					<view class="list-name">收款开户行</view>
					<view class="list-value">{{userInfo.createBank}}</view>
				</view>
			</view>
		</view>
		<view class="tips">
			<p>注意事项：</p>
			<p>1.提现是需要收取0.6%的手续费；</p>
			<p>2.如需更换收款账户，请联系平台客服；</p>
			<p>3.由于是线下转账，到账时间依赖银行流程，需要1-3个工作日才能到账；</p>
			<p>4.如有疑问请联系平台客服，工作时间：周一至周五工作日9：30-18：30。</p>
		</view>
		<view class="footer">
			<view class="button sumbit-button" @click="$u.throttle(sumbit, 1500)">确定</view>
			<view class="button cancel-button" @click="cancel">取消</view>
		</view>
		<lb-picker ref="picker1" v-model="value" mode="selector" :list="list" :dataset="{ name: 'label' }"
			@change="handleChange" @confirm="handleConfirm">
		</lb-picker>
	</view>
</template>

<script>
	import {
		channelMerImageInfo
	} from '@/api/api.js'
	import * as financialMcApi from "@/api/financialMcApi.js";
	export default {
		data() {
			return {
				withdrawAccount: 0,
				input: '',
				userInfo: {},
				value: 0,
				label: '提现至可用余额',
				list: [{
						label: '提现至可用余额',
						value: 0
					},
					{
						label: '收款账户',
						value: 1
					}
				],
			}
		},
		onLoad(options) {
			console.info(options.withdrawAccount)
			this.withdrawAccount = options.withdrawAccount
			this.getChannelMerImageInfo()
		},
		methods: {
			getChannelMerImageInfo() {
				let _this = this
				channelMerImageInfo().then(res => {
					_this.userInfo = res.data
				})
			},
			allInput() {
				if (Number(this.withdrawAccount) > 0) {
					this.input = this.withdrawAccount
				} else {
					uni.showToast({
						title: '可提现金额不足'
					});
				}
			},
			selectType() {
				this.$refs.picker1.show()
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleChange(e) {
				console.log('change::', e)
			},
			cancel() {
				uni.navigateBack()
			},
			sumbit() {
				const eventChannel = this.getOpenerEventChannel();
				let _this = this
				var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
				if (!reg.test(this.input)) {
					return this.$util.Tips({
						title: '请输入正确金额！'
					});
				}
				if (this.value == 0) {
					financialMcApi.withdrawAccount({
						price: this.input
					}).then(res => {
						_this.$util.Tips({
							title: '提现申请提交成功！'
						});
						setTimeout(function() {
							eventChannel.emit('someEvent', {
								data: ''
							});
							uni.navigateBack()
						}, 1500);
					})
				}
				if (this.value == 1) {
					var data = {
						price: this.input
					}
					financialMcApi.rechargeOffline(data).then(res => {
						_this.$util.Tips({
							title: '提现申请提交成功！'
						});
						setTimeout(function() {
							eventChannel.emit('someEvent', {
								data: ''
							});
							uni.navigateBack()
						}, 1500);
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.card-content {
		background-color: #FFFFFF;

		.card-head {
			padding: 10rpx 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.card-body {
			overflow: hidden;
		}

		.selectBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 34rpx 40rpx;
			padding: 24rpx;
			background-color: #F2F2F2;
		}

		.take-cash {
			margin: 34rpx 40rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				height: 88rpx;
				background-color: #F2F2F2;

				.button {
					width: 248rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background-color: #111111;
					color: #FFFFFF;
				}

				input {
					padding: 24rpx;
					flex: 1;
				}
			}

			.withdrawAccount {
				margin-top: 12rpx;
				color: #999999;
			}
		}

		.iconfont {
			font-size: 20rpx;
		}

		.body-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 34rpx 40rpx;

			.list-name {
				flex-shrink: 0;
				width: 140rpx;
				color: #666666;
			}

			.list-value {
				margin-left: 20rpx;
				font-weight: bold;
			}
		}
	}

	.tips {
		color: #999999;
		font-size: 20rpx;
		margin: 17rpx 28rpx;
	}

	.footer {
		margin: 30rpx;

		.button {
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border: 1rpx solid #111111;
		}

		.button~.button {
			margin-top: 36rpx;
		}

		.sumbit-button {
			background-color: #111111;
			color: #FFFFFF;
		}
	}
</style>
